<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./public/stylesheets/easyui.css">
    <link rel="stylesheet" type="text/css" href="./public/stylesheets/icon.css">
    <link rel="stylesheet" type="text/css" href="./public/stylesheets/demo.css">
    <script type="text/javascript" src="./public/javascripts/jquery.min.js"></script>
    <script type="text/javascript" src="./public/javascripts/jquery.easyui.min.js"></script>
    <title>Users</title>
</head>

<body>
    <div id="cc" data-options="fit:true" class="easyui-layout" style="width:600px;height:400px;">
        <div data-options="region:'north',split:true" style="height:100px;">
            <div style="margin:20px 0;"></div>
            <div class="easyui-panel" style="padding:5px;border:0;border-bottom:1px solid #ccc;">
                <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
            </div>
            <div id="mm1" style="width:150px;">
                <div data-options="iconCls:'icon-undo'">Undo</div>
                <div data-options="iconCls:'icon-redo'">Redo</div>
                <div class="menu-sep"></div>
                <div>Cut</div>
                <div>Copy</div>
                <div>Paste</div>
                <div class="menu-sep"></div>
                <div>
                    <span>Toolbar</span>
                    <div>
                        <div>Address</div>
                        <div>Link</div>
                        <div>Navigation Toolbar</div>
                        <div>Bookmark Toolbar</div>
                        <div class="menu-sep"></div>
                        <div>New Toolbar...</div>
                    </div>
                </div>
                <div data-options="iconCls:'icon-remove'">Delete</div>
                <div>Select All</div>
            </div>
            <div id="mm2" style="width:100px;">
                <div>Help</div>
                <div>Update</div>
                <div>About</div>
            </div>
            <div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
                <img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
                <p style="font-size:14px;color:#444;">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p>
            </div>

        </div>


        <div data-options="region:'west',title:'controlle',split:true" style="width:230px;">
            <div id="sm" style="width:100%"></div>
        </div>
        <div data-options="region:'center'">

            <div style="padding:5px 0;">
                <a id='add' href="#" class="easyui-linkbutton l-btn l-btn-small" data-options="iconCls:'icon-add'" group="" id=""><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">Add</span></span></a>
                <a id='removes' href="#" class="easyui-linkbutton l-btn l-btn-small" data-options="iconCls:'icon-remove'" group="" id=""><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">Removes</span></span></a>
            </div>
            <div data-options="fit:true" id="tt" class="easyui-tabs" style="width:500px;height:250px;">
                <table id="dg"></table>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    $(document).ready(function() {



        $('#sm').sidemenu({
            fit: true,
            data: [{
                text: 'Admin-cl',
                iconCls: 'fa fa-wpforms',
                state: 'open',
                children: [{
                    text: 'users'
                }, {
                    text: 'cate'
                }, {
                    text: 'news'
                }, {
                    text: 'product'
                }]
            }],
            border: 0,
            onSelect: function(item) {


                var text = item.text;

                if (text === 'users') {
                    $('a#add').css('display', 'inline-block')
                    $('a#removes').css('display', 'inline-block')
                    if (/Users/.test($('span.tabs-title').text())) {
                        $('#tt').tabs('select', 'Users')
                        return
                    }
                    var link = './views/users.html'
                    $('#tt').tabs('add', {
                        fit: true,
                        title: 'Users',
                        content: `<iframe src="${link}" frameborder="0" style="width:100%;height:100%"></iframe>`,
                        closable: true
                    });

                } else if (text === 'cate') {
                    $('a#add').css('display', 'none')
                    $('a#removes').css('display', 'none')
                    if (/cate/.test($('span.tabs-title').text())) {
                        $('#tt').tabs('select', 'cate')
                        $('a#add').css('display', 'none')
                        $('a#removes').css('display', 'none')
                        return
                    }

                    var link = './views/cate.html'
                    $('#tt').tabs('add', {
                        fit: true,
                        title: 'cate',
                        content: `<iframe id="cate" src="${link}" frameborder="0" style="width:100%;height:100%"></iframe>`,
                        closable: true
                    });
                } else if (text === 'news') {
                    $('a#add').css('display', 'inline-block')
                    $('a#removes').css('display', 'inline-block')
                    if (/new/.test($('span.tabs-title').text())) {

                        $('#tt').tabs('select', 'news')
                        return
                    }

                    var link = './views/news.html'
                    $('#tt').tabs('add', {
                        fit: true,
                        title: 'news',
                        content: `<iframe src="${link}" frameborder="0" style="width:100%;height:100%"></iframe>`,
                        closable: true
                    });
                } else if (text === 'product') {
                    $('a#add').css('display', 'inline-block')
                    $('a#removes').css('display', 'inline-block')
                    if (/product/.test($('span.tabs-title').text())) {

                        $('#tt').tabs('select', 'product')
                        return
                    }

                    var link = './views/product.html'
                    $('#tt').tabs('add', {
                        fit: true,
                        title: 'product',
                        content: `<iframe src="${link}" frameborder="0" style="width:100%;height:100%"></iframe>`,
                        closable: true
                    });

                }

                // $.ajax({
                //     url: 'http://localhost:9000/users/',
                //     method: 'GET',
                //     success: function(res) {
                //         console.log(res)
                //     }
                // })
            }
        });





    });
</script>

</html>